<template>
  <div id="topicDetails">
    <div class="div1">
      <img :src="infoData.thumPic" class="topicLogo" />
      <div class="right1">
        <div class="text1">
          <p>{{ infoData.title }}</p>
          <!-- <el-tooltip
            class="item"
            effect="light"
            content="收藏"
            placement="top"
            popper-class="mytooltip"
            :hide-after="2000"
          >
            <img
              src="@/assets/wang/video/like.png"
              v-show="infoData.isCollect == 0"
              @click="addStar(infoData.topicId, infoData)"
            />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            content="取消收藏"
            placement="top"
            popper-class="mytooltip"
            :hide-after="2000"
          >
            <img
              src="@/assets/wang/video/liked.png"
              v-show="infoData.isCollect == 1"
              @click="cancelStar(infoData.topicId, infoData)"
            />
          </el-tooltip>-->
        </div>
        <div class="text2">
          <p>发起人:</p>
          <div class="infoBox">
            <img :src="infoData.logo" />
            <span>{{ infoData.nickname }}</span>
          </div>
        </div>
        <div class="text3">
          <!-- <p>发起时间:<span>2020-09-18 18:12:29</span></p> -->
          <p>
            参与人数:
            <span>{{ format_num(infoData.useCount) }}</span>
          </p>
          <p>
            播放量:
            <span>{{ format_num(infoData.playCount) }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="div2">
      <div class="div2Item">
        <div class="myTitle">
          <img src="@/assets/wang/talentCompare/baseinfo.png" alt />
          <span>每日使用人数趋势图</span>
        </div>
        <div class="lineChartBox">
          <lineChart
            :xData="xData1"
            :yData="yData1"
            name1="使用人数"
            v-if="finishChart && xData1.length != 0 && yData1 != null"
          />
          <div
            v-loading="!finishChart"
            v-if="!finishChart"
            class="loading loadingwl01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishChart && xData1.length == 0 && yData1 == null"
            class="noDataNoticewl"
          >目前没有可以查看的数据哟~</div>
        </div>
      </div>
      <div class="div2Item">
        <div class="myTitle">
          <img src="@/assets/wang/video/useJob.png" alt />
          <span>使用人群行业分布</span>
        </div>
        <div style="height: 439px">
          <BigPie :valueData="pieData" v-if="finishPie && pieData.length != 0" />
          <div
            v-loading="!finishPie"
            v-if="!finishPie"
            class="loading loadingwl01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishPie && pieData.length == 0"
            class="noDataNoticewl"
          >目前没有可以查看的数据哟~</div>
        </div>
      </div>
    </div>
    <div class="div3">
      <div class="myTitle">
        <img src="@/assets/wang/video/look.png" alt />
        <span>播放量趋势图</span>
      </div>
      <div class="lineChartBox">
        <lineChart
          :xData="xData1"
          :yData="yData2"
          name1="播放量"
          v-if="finishChart && xData1.length != 0 && yData2 != null"
        />
        <div
          v-loading="!finishChart"
          v-if="!finishChart"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <div
          v-if="finishChart && xData1.length == 0 && yData2 == null"
          class="noDataNoticewl smallHeight"
        >目前没有可以查看的数据哟~</div>
      </div>
    </div>
    <div class="div4">
      <el-tabs v-model="sortTabs">
        <el-tab-pane label="点赞排序" name="first"></el-tab-pane>
        <el-tab-pane label="发布时间排序" name="second"></el-tab-pane>
        <section v-show="!noData">
          <div
            class="div4Item"
            v-infinite-scroll="loadMoreVideo"
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="0"
            infinite-scroll-immediate-check="false"
          >
            <div
              class="videoImgBox"
              v-for="(item, index) in topicVideoList"
              :key="'v' + index"
            >
              <img
                src="@/assets/wang/video/like.png"
                class="likeImg"
                v-if="item.isCollect == 0"
                @click="addVideoStar(item.awemeId, item)"
              />
              <img
                src="@/assets/wang/video/liked.png"
                class="likeImg"
                v-if="item.isCollect == 1"
                @click="cancelVideoStar(item.awemeId, item)"
              />
              <img
                src="@/assets/wang/video/play1.png"
                class="playImg"
                @click="toPlay(item.url)"
              />
              <img :src="item.thumPic" class="videoImg" />
              <div class="zanBox">
                <img src="@/assets/wang/video/zan.png" />
                <span>{{ format_num(item.favoriteCount) }}</span>
              </div>
              <div class="userInfoMaskWl"></div>
            </div>
          </div>
          <div
            v-loading="loading"
            v-if="!(topicVideoList.length < (page - 1) * 9)"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <p
            class="nothing"
            v-show="topicVideoList.length < (page - 1) * 9&&topicVideoList.length!=0"
          >我是有底线的～</p>
        </section>
        <div class="empty" v-if="topicVideoList.length==0&&!loading">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import lineChart from '../../component/lineChart.vue';
import BigPie from '@/pages/wang/talent/tdetails/component/BigPie';
export default {
  props: {
    topicId: Number | String
  },
  components: {
    lineChart,
    BigPie
  },
  data() {
    return {
      xData1: [],
      yData1: [],
      yData2: [],
      pieData: [],
      sortTabs: 'first',
      infoData: {},
      topicVideoList: [],
      page: 1,
      busy: false,
      loading: true,
      noData: false,
      finishChart: false,
      finishPie: false,
      cancel: null, //取消之前没响应成功的请求
      cancel01: null,
      cancel02: null,
      cancel03: null,
      cancel04: null
    };
  },
  computed: {},
  watch: {
    sortTabs: function (newVal, oldVal) {
      this.page = 1;
      this.topicVideoList = [];
      this.getTopicAwemes();
    }
  },
  created() {
    this.getDetailsData();
    this.getTradeRatio(1);
    this.getTradeRatio(2);
    this.getTopicAwemes();
  },
  mounted() {},

  methods: {
    // 基本信息
    getDetailsData() {
      let that = this;
      that.$axios
        .get('/api/topic/GetTopicDetail?topicId=' + that.topicId)
        // .get("/api/topic/GetTopicDetail?topicId=" + 1380949933)
        .then(res => {
          if (res.data.code == 0) {
            that.infoData = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 图表
    getTradeRatio(chartType) {
      // console.log(chartType);
      let that = this;
      that.$axios
        .get('/api/topic/GetTradeRatio', {
          params: {
            topicId: that.topicId,
            chartType: chartType //1:使用人数（datas1） 播放量增量 (datas2) 2:行业分析
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            if (chartType == 1) {
              that.yData1 = res.data.data.datas1; //使用人数
              if (res.data.data.dates != null) {
                res.data.data.dates.forEach(element => {
                  that.xData1.push(that.timestamp(element, 'M/D'));
                  return that.xData1;
                });
              }
              that.yData2 = res.data.data.datas2; //播放量增量
              that.finishChart = true;
            } else if (chartType == 2) {
              that.pieData = res.data.data;
              that.finishPie = true;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 话题视频
    getTopicAwemes() {
      let that = this;
      that.loading = true;
      let SortType = '';
      if (that.sortTabs == 'first') {
        SortType = 1;
      } else if (that.sortTabs == 'second') {
        SortType = 2;
      }
      that.$axios
        .post(
          '/api/topic/GetTopicAwemes',
          {
            topicId: that.topicId,
            SortType: SortType,
            index: that.page,
            size: 9
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.loading = false;
            that.page += 1;
            that.topicVideoList = that.topicVideoList.concat(res.data.data);
            res.data.data.length < 9 ? (that.busy = true) : (that.busy = false);
            that.noData = false;
          } else if (res.data.code == 1002) {
            that.loading = false;
            that.noData = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 播放
    toPlay(url) {
      window.open(url);
    },
    loadMoreVideo() {
      if (this.noData == true) {
        return false;
      }
      if (this.loading == false) {
        this.getTopicAwemes();
      }
    },
    // 添加视频收藏
    addVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/InsertCollection',
          {
            CollectId: id,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 1;
            that.$emit('changeVideoCollect', 1, id);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏视频
    cancelVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/CancelCollection',
          {
            CollectId: id,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 0;
            that.$emit('changeVideoCollect', 0, id);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 收藏话题
    addStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/InsertCollection',
          {
            CollectId: id,
            Module: 4 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 1;
            that.$emit('changeTopicCollect', 1);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏话题
    cancelStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/CancelCollection',
          {
            CollectId: id,
            Module: 4 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 0;
            that.$emit('changeTopicCollect', 0);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang='less' scoped>
#topicDetails {
  padding: 30px;

  .div1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .topicLogo {
      width: 80px;
      height: 80px;
      border-radius: 20px;
      border: 1px solid #e5e5e5;
    }

    .right1 {
      flex: 1;
      margin-left: 20px;

      .text1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        p {
          font-size: 16px;
          color: #222222;
          font-weight: 600;
        }

        img {
          width: 16px;
          height: 16px;
          margin-left: 17px;
          cursor: pointer;
        }
      }

      .text2 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 11px;
        margin-bottom: 6px;

        p {
          font-size: 14px;
          color: #888888;
          padding-right: 8px;
        }

        .infoBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          img {
            width: 26px;
            height: 26px;
            border-radius: 50%;
          }

          span {
            font-size: 14px;
            color: #222222;
            padding-left: 6px;
          }
        }
      }

      .text3 {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        p {
          font-size: 14px;
          color: #888888;
          padding-right: 29px;

          span {
            color: #222222;
            padding-left: 8px;
          }
        }
      }
    }
  }

  .div2 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 34px;

    .div2Item {
      width: 50%;
    }
  }

  .myTitle {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    img {
      width: 16px;
      height: 16px;
    }

    span {
      font-size: 16px;
      color: #222222;
      padding-left: 9px;
      font-weight: 600;
    }
  }

  .div3 {
    margin-top: 35px;
  }
  .lineChartBox {
    width: 100%;
    height: 449px;
  }
  .div4 {
    .div4Item {
      background-color: #fff;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      padding-top: 28px;

      .videoImgBox {
        width: 110px;
        height: 159px;
        border-radius: 4px;
        position: relative;
        margin-right: 20px;
        margin-bottom: 10px;

        .likeImg {
          width: 20px;
          height: 20px;
          position: absolute;
          left: 7px;
          top: 7px;
          display: none;
          cursor: pointer;
          z-index: 2;
        }

        .playImg {
          width: 30px;
          height: 30px;
          position: absolute;
          left: 40px;
          top: 65px;
          display: none;
          cursor: pointer;
          z-index: 2;
        }

        .videoImg {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }

        .zanBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          z-index: 2;
          position: absolute;
          left: 0;
          bottom: 4px;

          img {
            width: 13px;
            height: 12px;
            margin-left: 7px;
          }

          span {
            font-size: 14px;
            color: #ffffff;
            padding-left: 6px;
            font-family: DINAlternate-Bold;
          }
        }
      }

      //   hover 显示收藏和播放
      .videoImgBox:hover {
        .likeImg {
          display: block !important;
        }

        .playImg {
          display: block !important;
        }
      }
    }
  }
  //   暂无数据行高
  .smallHeight {
    line-height: 190px;
  }
}
</style>
